<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
      background-color: pink;
    }

    textarea {
      width: 300px;
      height: 30px;
      padding: 10px;
      border-color: transparent;
      outline: none;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
    
</body>
</html>
<script>
// 事件对象：在事件触发的时候 浏览器传给我们事件处理函数的一些信息，存在对象中   形参：  e  event evt
const box = document.querySelector('.box')
box.addEventListener('click',function (e) {
    // console.log('我被点击了');
    console.log(e);
  })

//   输入框键盘事件
const tx = document.querySelector('#tx')
tx.addEventListener('keydown',function (e) {

    // console.log('按下了',e.key);
    if(e.key === 'Enter'){
        console.log('用户按下了enter回车键');
    }

  })


</script>